<template>
  <div>
    <form @submit.prevent="diagnose">
      <div>
        <label for="name">姓名:</label>
        <input type="text" id="name" v-model.trim="patientInfo.name" />
      </div>
      <div>
        <label for="age">年龄:</label>
        <input type="number" id="age" v-model.number="patientInfo.age" />
      </div>
      <div>
        <label for="height">身高:</label>
        <input
          type="number"
          id="height"
          v-model.number="patientInfo.height"
        />(厘米)
      </div>
      <div>
        <label for="weight">体重:</label>
        <input
          type="number"
          id="weight"
          v-model.number="patientInfo.weight"
        />(公斤)
      </div>
      <div>
        <label for="medical-history">病史:</label>
        <textarea
          id="medical-history"
          v-model="patientInfo.medicalHistory"
          style="width: 164px; height: 16px"
        ></textarea>
      </div>
      <button type="submit" @click="diagnose">诊断</button>
    </form>
    <div v-show="isShow">
      <strong>诊断结果：</strong>
      <span>{{ diagnoseResult }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      patientInfo: {
        name: "",
        age: "",
        height: "",
        weight: "",
        medicalHistory: "",
      },
      isShow: false,
      diagnoseResult: "",
    };
  },
  methods: {
    diagnose() {
      this.isShow = true;
      const weight = this.patientInfo.weight
      const height = (this.patientInfo.height) /100
      const bmi = weight / (height * height)
      if (bmi < 18.5) {
        this.diagnoseResult = `${
          this.patientInfo.name
        } 的 BMI 值为 ${bmi.toFixed(2)}，体重过轻`
      } else if (bmi > 24.9) {
        this.diagnoseResult = `${
          this.patientInfo.name
        } 的 BMI 值为 ${bmi.toFixed(2)}，体重过重`
      } else {
        this.diagnoseResult = `${
          this.patientInfo.name
        } 的 BMI 值为 ${bmi.toFixed(2)}，健康`
      }
    },
  },
};
</script>

<style>
</style>